<template>
  <div>
    <el-row>
      <el-col :span="12">
        <p>中文</p>
        <tinymce-editor v-model="richText.content"
                        :disabled="disabled"
                        @onClick="onClick"
                        :paramsData="paramsData"
                        ref="editor">
        </tinymce-editor>
      </el-col>
      <el-col :span="12">
        <p>英文</p>
        <tinymce-editor v-model="richText.englishContent"
                        :disabled="disabled"
                        @onClick="onClick"
                        :paramsData="paramsData"
                        ref="englishEditor">
        </tinymce-editor>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="danger" @click="clear">清空内容</el-button>
      <el-button type="primary" @click="submitBtn">提交</el-button>
    </el-row>
  </div>
</template>

<script>
  import TinymceEditor from '../../../components/tinymce/tinymce-edit'
  import { getInterface } from '../../../../utils/api'

  export default {
    components: {
      TinymceEditor
    },
    props: ['richText'],
    data () {
      return {
        disabled: false,
        paramsData: 'COMPANY_PROFILE_002'
      }
    },
    methods: {
      onClick (e, editor) {
        // console.log('Element clicked')
        // console.log(e)
        // console.log(editor)
      },
      submitBtn () {
        this.$http({
          url: getInterface.aboutUs.companyProfileUpdate,
          method: 'post',
          data: this.$http.adornData({
            'primaryResources': this.richText.content,
            'primaryResourcesEnglish': this.richText.englishContent,
            'id': 1
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList', this.richText.content, this.richText.englishContent)
              }
            })
          }
        }).catch(err => {
          console.log(err)
        })
      },
      clear () {
        this.$refs.editor.clear()
        this.$refs.englishEditor.clear()
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-row{
    margin-top: 15px;
  }
  .el-dialog__body{
    padding-top: 0;
  }
</style>
